import React from 'react';

import { PlusOutlined } from '@ant-design/icons';
import FilterListItem from '@/pages/Analysis/Board/components/Filters/config/FilterListItem';
import { IControlBase, IGlobalControl } from '@/pages/Analysis/Board/components/Filters/types';

// const styles = require('../index.less')
import styles from '../index.less';

const classnames = require('classnames');

interface IFilterListProps {
  list: IGlobalControl[]
  selectedFilter: IControlBase | undefined
  onSelectFilter: (key: string) => void
  onAddFilter: () => void
  onDeleteFilter: (selectKey: string) => void
  onNameChange: (key: string) => (name: string) => void
  // onParentChange: (key: string, parentKey: string, type: string, dropNextKey?: string) => void
}


const FilterList: React.FC<IFilterListProps> = (props: IFilterListProps) => {
  const { onAddFilter, list, onNameChange, onDeleteFilter, onSelectFilter, selectedFilter } = props;

  const onAddFilterClick = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation();
    onAddFilter();
  };
  const selectFilter = (selectedKeys: string[]) => {
    if (selectedKeys.length) {
      onSelectFilter(selectedKeys[0]);
    }
  };
  return (
    <div className={styles.filterList}>
      <div className={styles.title}>
        <h2>控制器列表</h2>
        <PlusOutlined onClick={onAddFilterClick} />
      </div>
      <div className={classnames({
        [styles.treeContainer]: true,
      })}>
        {list.map((v) => {
          return <FilterListItem
            title={v.name}
            selected={selectedFilter?.key === v.key}
            onNameChange={onNameChange(v.key)}
            onDelete={() => onDeleteFilter(v.key)}
            selectFilter={() => selectFilter([v.key])}
          />;
        })
        }
      </div>
    </div>
  );

};

export default FilterList;
